<link rel="stylesheet" href="__PUBLIC__/js/bootstrapvalidator/css/bootstrapValidator.min.css" />
<link rel="stylesheet" href="__PUBLIC__/css/bootstrap-datetimepicker.css" />
<style>
    .time-range {
        margin-top: -28px;
        margin-left: 113px;
    }
    .time-range>span {
        height: 35px;
        line-height: 35px;
    }
</style>
<div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">设置服务预约</h4>
        </div>
        <form class="form-horizontal" style="padding:4%;height:500px;overflow-y:auto;" id="orderList">
            <div class="form-group">
                <label class="control-label col-sm-2">服务部门:</label>
                <div class="col-sm-5">
                    <select class="form-control" name="org_id" id="org_id">
                        <option value="" <if condition="$appDetail['org_id'] eq ''">selected</if>>请选择服务部门</option>
                        <foreach name="orgList" item="org">
                            <option value="{$org.id}" <if condition="$org['id'] eq $appDetail['org_id']">selected</if>>{$org.name}</option>
                        </foreach>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">服务人员:</label>
                <div class="col-sm-5">
                    <select class="form-control select2" name="user_id[]" id="user_id" multiple>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">预约日期:</label>
                <div class="col-sm-5">
                    <div class="input-group date" id="order_time">
                        <input type='text' value="{$appDetail.order_time|date="Y-m-d",###}" name="order_time" class="form-control " data-date-format="yyyy-mm-dd" />
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">预约人数:</label>
                <div class="col-sm-5">
                    <input class="form-control" name="nums" value="{$appDetail.nums}" placeholder="请填写每个时间段的预约人数" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">预约时间段:</label>
                <div class="time-range col-sm-10 col-md-10 col-lg-10">
                    <span class="col-sm-10 col-md-10 col-lg-10">
                        <input type="checkbox" value="1" id="week_all" name="week_all" />
                        <label for="week_all">一周内相同（周一至周五）</label>
                    </span>
                    <foreach name="orderTimeRange" item="time">
                        <span class="col-sm-3 col-md-3 col-lg-3">
                            <input type="checkbox" value="{$time}" id="time_{$key}" name="time_range[]" <if condition="in_array($time,$appDetail['time_range'])">checked="checked"</if> />
                            <label for="time_{$key}" title="{$time}">{$time}</label>
                        </span>
                    </foreach>
                    <span class="col-sm-10 col-md-10 col-lg-10">
                        <input type="checkbox" value="" id="check_all" name="check_all" />
                        <label for="check_all">全选</label>
                    </span>
                </div>
            </div>
            <input type="hidden" name="token" value="{$formToken}">
        </form>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
            <button type="button" id="save" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
    var userId = "{$appDetail.user_id}";
    $(function () {
        $("#order_time").datetimepicker({
            format: "yyyy-mm-dd",
            language: "ch",
            pickDate: true,
            pickTime: false,
            autoclose: true,
            minView: 2,
            startDate: "{$curDayWeek}"
        }).on('hide',function(e) {
            var bv = $('#orderList').data('bootstrapValidator');
            if(bv){
                bv.updateStatus('order_time', 'NOT_VALIDATED',null).validateField('order_time');
            }
        });;

        $("#org_id").select2({
            placeholder: "请选择服务部门",
            width: "100%"
        });

        $("#user_id").select2({
            placeholder: "请选择服务人员",
            width: "100%"
        });

        $("#org_id").bind("change",showUsers);
        $("#org_id").change();

        $("input[type='checkbox']").iCheck({
            checkboxClass: 'icheckbox_flat-blue',
            radioClass: 'iradio_flat-blue',
            increaseArea: '10%'
        });

        chooseAll();
        $("#save").bind("click",doSave);
    });

    function chooseAll(){
        $('#check_all').on('ifChecked', function(event){
            $("input[name='time_range[]']:checkbox").each(function(){
                var $this = $(this);
                if(!$this.prop("disabled")){
                    $this.iCheck("check");
                }
            });
        });
        $('#check_all').on('ifUnchecked', function(event){
            $("input[name='time_range[]']:checkbox").iCheck("uncheck");
        });
    }

    function showUsers() {
        $.ajax({
            url: "{:U('Admin/Appointment/getUserByOrgId')}",
            type: "post",
            data: {
                orgId: $("#org_id").val(),
            },
            success: function (data) {
                $("#user_id").empty();
                var html = '';
                $.each(data, function (index, item) {
                    var selected = '';
                    if (userId == item.id) {
                        selected = 'selected';
                    }
                    html += '<option value="' + item.id + '" '+selected+'>' + item.real_name + '</option>';
                });
                $("#user_id").html(html);
            }
        })
    }

    var commitFlag = false;
    function doSave(){
        if(commitFlag){
            common.alert("提示","请勿重复提交");
            return;
        }
        commitFlag = true;
        if(!validateForm()){
            commitFlag = false;
            return false;
        }
        var str = "";
        $("input[name='time_range[]']:checkbox").each(function(){
            if(true == $(this).is(':checked')){
                str += "," + $(this).val();
            }
        });
        if(str == ""){
            commitFlag = false;
            common.alert("提示","请至少选择一个时间段");
            return;
        }
        $.ajax({
            url: "{:U('Admin/Appointment/add')}",
            type: "post",
            dataType: "json",
            data: $("#orderList").serialize(),
            success: function (data) {
                if(data.status){
                    common.alert("提示",data.msg,function(){
                        common.reload();
                    });
                }else{
                    commitFlag = false;
                    common.alert("提示",data.msg);
                }
            }
        });
    }

    function validateForm(){
        $('#orderList').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                org_id: {
                    validators: {
                        notEmpty: {
                            message: '请选择服务部门'
                        }
                    }
                },
                "user_id[]": {
                    validators: {
                        notEmpty: {
                            message: '请选择服务人员'
                        }
                    }
                },
                order_time: {
                    validators: {
                        notEmpty: {
                            message: '预约日期不能为空'
                        }
                    }
                },
            }
        });
        var data = $('#orderList').data('bootstrapValidator');
        if (data) {
            data.validate();
            if (!data.isValid()) {
                return false;
            }
        }
        return true;
    }

</script>